<template>
  <div class="banner">
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
      interval="50000"
    >
      <v-carousel-item v-for="(slide, i) in imgList" :key="i">
        <!-- :color="colors[i]" -->
        <v-sheet height="100%">
          <v-row class="fill-height" align="center" justify="center">
            <!-- <v-img
              :lazy-src="slide"
              height="400"
              :contain="true"
              :src="slide"
            ></v-img> -->
            <img :src="slide" alt="" />
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      colors: [
        "indigo",
        "warning",
        "pink darken-2",
        "red lighten-1",
        "deep-purple accent-4",
      ],
      imgList: [
        "https://img2.baidu.com/it/u=3015045708,4243438371&fm=26&fmt=auto&gp=0.jpg",
        "https://img1.baidu.com/it/u=2725256892,1346976217&fm=26&fmt=auto&gp=0.jpg",
      ],
      slides: ["First", "Second", "Third", "Fourth", "Fifth"],
    };
  },
};
</script>
<style scoped lang="scss">
@import "./../../../common/styles/common.scss";
.banner {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
</style>